<template>
  <div class="smsConfig" style="height: 100%;overflow-y: scroll;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in menu" :label="item.name" :name="item.value">
      </el-tab-pane>
      <!--<el-tab-pane label="挂机短信" name="hangUpSms">-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="闪信模板管理" name="instantSms">-->
      <!--</el-tab-pane>-->
    </el-tabs>
    <keep-alive>
      <component :is="activeName"></component>
    </keep-alive>
  </div>
</template>
<script>
  import smsTemplate from './smsTemplateConfig/index'
  import hangUpSms from './hangUpSmsConfig/index'
  import instantSms from './instantSmsConfig/index'
  import { isHasMenu } from '@/utils/m7Utils'
  export default {
    name: 'smsConfig',
    data () {
      return {
        activeName: '',
        menu: [
          {name: this.$t('routeI18n.smsTemplate'), value: 'smsTemplate', id: 'sms_template_query'},
          {name: this.$t('sms.hangupSMS'), value: 'hangUpSms', id: 'hangup_sms'},
          {name: this.$t('configLazyLoad.sms.quickSmsTemplate'), value: 'instantSms', id: ''}
        ]
      }
    },
    components: {
      smsTemplate,
      hangUpSms,
      instantSms
    },
    methods: {
      isMenu () {
        this.menu = this.menu.filter(item => {
          return !item.id || (item.id && isHasMenu(item.id, this.$store.state.session.user))
        })
        this.activeName = this.menu[0].value
      },
      handleClick (tab) {
        this.activeName = tab.name
      }
    },
    beforeMount () {
      this.isMenu()
    }
  }
</script>
<style lang="stylus" scoped>

</style>
